<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>HouseInfo</title>
    <link rel="stylesheet" href="/css/bootstrap.css">
    <script src="/js/jquery.js"></script>
    <link rel="stylesheet" href="/css/details.css">
    <link rel="stylesheet" href="/layui/css/layui.css">
    <link rel="stylesheet" href="//at.alicdn.com/t/font_848666_pri5cwk3xde.css"/>
    <script src="/layui/layui.js"></script>
    <script src="/js/bootstrap.js"></script>
    <style>
        .carousel-inner .carousel-item{
            height: 400px;
        }
        .carousel-inner > .carousel-item > img{
            position: absolute;
            top: 0;
            left: 0;
            min-width: 100%;
            height: 400px;
        }
        .logo{
            background-image: url("/img/banner2.jpg");
            background-position: center left;
            background-size: cover;
            width: 60px;
            height: 60px;
            border-radius: 50%;
            margin: 0px 20px;
            box-shadow:
                /*logo*/ 0px 0px 2px #5f5f5f,
                /*effset*/ 0px 0px 0px 5px #ecf0f3,
                /*bottom right*/ 8px 8px 15px #a7aaaf,
                /*top left*/ -8px -8px 15px #ffffff;
        }
        .top-buffer1{
            margin-top: 20px;
        }
        .top-buffer2{
            margin-top: 10px;
        }
    </style>
<body>
<nav class="navbar sticky-top navbar-light" style="background-color: #e3f2fd; border-radius: 10px">
    <div class="container-fluid">
        <span class="navbar-brand">
            <h1>Yager</h1>
        </span>
        <ul class="nav justify-content-center">
            <li class="nav-item">
                <a href="#" class="nav-link disabled"><h2>房屋详情</h2></a>
            </li>
        </ul>
    </div>
</nav>
<div class="details-head">
    <!-- title -->
    <div class="title-wrapper">
        <div class="left-con">
            <h2 class="house-title" th:text="${session.Onehouse.housedescription}"></h2>
            <p class="tags">
                <span>户型方正，采光好，格局好。</span>
            </p>
        </div>
    </div>
</div>
</header>

<section class="layui-container wrapper">
    <p class="breadcrumb">
        <span class="layui-breadcrumb" lay-separator=">">
            <a href="toIndexPage">首页</a>
            <a href="#">房屋详情</a>
        </span>
    </p>
    <div class="carousel-image layui-pull-left layui-col-md7">
        <div class="layui-carousel" id="details-image">
            <div class="carousel-item" th:each="image : ${session.images}">
                    <div th:style="'background:url('+ '/' +${image}+') no-repeat center/cover;'"></div>
            </div>
        </div>
    </div>
    <div class="details-info layui-pull-right layui-col-md5">
        <div class="show-price">
            <span class="sale-price" th:text="${session.Onehouse.houseprice}"></span>
            <span class="sale-unit">元/月</span>
            <span class="area" th:text="${session.Onehouse.housetype}"> 押一付三</span>
        </div>
        <hr>
        <div class="show-house-name">
            <p><span class="field">小区名称：</span><span class="name" th:text="${session.Onehouse.housename}"></span></p>
            <p><span class="field">小区地址：</span><span class="name" th:text="${session.Onehouse.houseaddress}"></span></p>
            <p><span class="field">周边学校：</span><span class="name">请联系我咯</span></p>
            <p><span class="field">房屋大小：</span><span class="name" th:text="${session.Onehouse.housesize}"></span></p>
        </div>
        <hr>
        <div class="order-btn-container">
            <div class="btn btn-group">
            <button class="order-btn" lay-filter="addOrder">现在预定</button>
            <a class="order-btn" href="/accuse/toAddFromHouse" style="line-height: 50px">举报</a>
            </div>
        </div>
    </div>
    <div class="anchor-title">
        <h3>房屋配置</h3>
    </div>
    <div class="household-appliances">
        <ul>
            <li>
                <i class="iconfont icon-chuang"></i>
                <span>床</span>
            </li>
            <li>
                <i class="iconfont icon-kongtiao"></i>
                <span>空调</span>
            </li>
            <li>
                <i class="iconfont icon-yigui"></i>
                <span>衣柜</span>
            </li>
            <li>
                <i class="iconfont icon-iconyihuifu-"></i>
                <span>桌椅</span>
            </li>
            <li>
                <i class="iconfont icon-xiyiji"></i>
                <span>洗衣机</span>
            </li>
            <li>
                <i class="iconfont icon-shafa"></i>
                <span>沙发</span>
            </li>
            <li>
                <i class="iconfont icon-xiaodugui"></i>
                <span>消毒柜</span>
            </li>
            <li>
                <i class="iconfont icon-weibolu"></i>
                <span>微波炉</span>
            </li>
            <li>
                <i class="iconfont icon-chouyouyanji"></i>
                <span>抽油烟机</span>
            </li>
            <li>
                <i class="iconfont icon-dianshi"></i>
                <span>电视</span>
            </li>
            <li>
                <i class="iconfont icon-meiqitianranqi"></i>
                <span>天然气</span>
            </li>
            <li>
                <i class="iconfont icon-kuandai"></i>
                <span>宽带</span>
            </li>
            <li>
                <i class="iconfont icon-reshuiqianzhuang"></i>
                <span>热水器</span>
            </li>
            <li>
                <i class="iconfont icon-bingxiang"></i>
                <span>冰箱</span>
            </li>
        </ul>
    </div>
</section>
</body>
<script type="text/javascript">
</script>
</html>